<template>
	<view class="video_measurement_wrap">
		<view>要求：分享前端VUE开发实例，并通过视频方式演示其效果</view>
		<view class="skill_info">
			<text class="skill_text">技能要求</text>
			<view class="skill_over">
				<view v-for="(item, index) in skill" :key="index" class="skill_show">
					<text class="show_text" v-text="item.name"></text>
				</view>
			</view>
		</view>
		
		<view class="video_info">
			<video src="" width="150" height="80" class="video_identical"></video>
			<video src="" width="150" height="80" class="video_identical"></video>
		</view>
		
		<view class="video_footer">
			<u-button type="primary" @click="toUpload">上传</u-button>
		</view>
		
		<view>
			<u-action-sheet :list="list" v-model="showActionSheet" :cancel-btn="true" @click="handleAction"></u-action-sheet>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'y-video-measurement',
		data() {
			return {
				skill: [
					{name: 'axure'},
					{name: '产品设计'},
					{name: '团队协作'},
					{name: '领导能力'},
					{name: '技术方案'}
				],
				list: [
					{text: '从个人资源选择',fontSize: 28},
					{text: '从手机相册选择',fontSize: 28},
					{text: '拍摄',fontSize: 28}
				],
				showActionSheet: false,
				src: ''
			}
		},
		methods: {
			// 打开上传选项
			toUpload() {
				this.showActionSheet = true
			},
			
			// 点选某一选项
			handleAction(index) {
				let id = 2;
				switch (index){
					case 0:
						// 从资源选择
						uni.navigateTo({
							url: '/pages/position-details/components/y-video-measurement/person-resource/index?id=' + id
						})
						break;
					case 1:
						// 从手机相册选择
						uni.chooseVideo({
							count: 1,
							sourceType: ['album'],
							success: function (res) {
								this.src = res.tempFilePath
								console.log(this.src)
							}.bind(this)
						});
						break;
					case 2:
						// 拍照
						uni.chooseVideo({
							count: 1,
							sourceType: ['camera'],
							success: function (res) {
								this.src = res.tempFilePath
								console.log(this.src)
								uni.navigateTo({
									url: '/pages/position-details/components/y-video-measurement/camera/index'
								})
							}.bind(this)
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './style/index.scss'
</style>
